<%@ include file="/WEB-INF/jsp/include.jsp"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit profile</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/ui-lightness/jquery-ui-1.8.custom.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/standard-form.css"/>">
<!-- <script type="text/javascript"
	src="<c:url value="/scripts/jquery-1.7.1.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/jquery.ui.core.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/jquery.ui.widget.js"/>"></script> 
<script type="text/javascript"
	src="<c:url value="/scripts/jquery.ui.position.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/jquery.ui.autocomplete.js"/>"></script>-->
<script type="text/javascript"
	src="<c:url value="/scripts/jquery-1.4.2.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/scripts/jquery-ui-1.8.custom.min.js"/>"></script>

<script type="text/javascript">
	function setupKeywords(containerId, inputId) {
		//attach autocomplete
		$("#" + inputId).autocomplete(
				{
					//define callback to format results
					source : function(req, add) {
						//pass request to server
						$.getJSON("<c:url value="/suggest/test3.htm"/>", req,
								function(data) {
									//create array for response objects
									var suggestions = [];
									//process response
									$.each(data, function(i, val) {
										suggestions.push(val.name);
									});
									//pass array to callback
									add(suggestions);
								});
					},

					//define select handler
					select : function(e, ui) {
						//create formatted friend
						var friend = ui.item.value, span = $("<span>").text(
								friend), a = $("<a>").addClass("remove").attr({
							href : "javascript:",
							title : "Remove " + friend
						}).text("x").appendTo(span);
						//add friend to friend div
						span.insertBefore("#" + inputId);
					},

					//define select handler
					change : function() {
						//prevent 'musicquery' field being updated and correct position
						$("#" + inputId).val("").css("top", 2);
					}
				});
		//add click handler to musicContainer div
		$("#" + containerId).click(function() {
			//focus 'musicquery' field
			$("#" + inputId).focus();
		});
		//add live handler for clicks on remove links
		$(".remove", document.getElementById(containerId)).live("click",
				function() {
					//remove current friend
					$(this).parent().remove();
					//correct 'to' field position
					if ($("#" + containerId + " span").length === 0) {
						$("#" + inputId).css("top", 0);
					}
				});
	}
	$(function() {
		setupKeywords("musicContainer", "musicquery");
		setupKeywords("movieContainer", "moviequery");
		setupKeywords("bookContainer", "bookquery");
	});
</script>
</head>
<body>
	<div class="formWrap">
		<form:form method="post" action="/profile/edit.htm"
			cssClass="standardForm">
			<fieldset>
				<legend>Edit profile</legend>
				<span>Edit profile form</span>
				<form:label path="email">Email</form:label>
				<form:input path="email" />
				<form:errors path="email" />
				<form:label path="firstname">First Name</form:label>
				<form:input id="firstNameId" path="firstname" />
				<form:label path="lastname">Last Name</form:label>
				<form:input path="lastname" />
				<form:label path="telephone">Telephone</form:label>
				<form:input path="telephone" />
				<form:label path="interests[Music]"
					cssClass="keywordEntryPointLabel">Music</form:label>
				<div id="musicContainer" class="keywordContainer ui-helper-clearfix">
					<input type="text" id="musicquery" class="keywordEntryPoint" />
				</div>
				<form:hidden path="interests[Music]" />
				<form:label path="interests[Movies]">Movies</form:label>
				<div id="movieContainer" class="keywordContainer ui-helper-clearfix">
					<input type="text" id="moviequery" class="keywordEntryPoint" />
				</div>
				<form:hidden path="interests[Movies]" />
				<form:label path="interests[Books]">Books</form:label>
				<div id="bookContainer" class="keywordContainer ui-helper-clearfix">
					<input type="text" id="bookquery" class="keywordEntryPoint" />
				</div>
				<form:hidden path="interests[Books]" />
				<br />
				<input type="submit" value="Edit profile" />
			</fieldset>
		</form:form>
	</div>
</body>
</html>